<template>
  <div class="box">
    <el-form ref="userForm" :model="form" :rules="userRules" label-width="120px">
      <el-form-item prop="id" label="等级">
        <el-select :disabled="isedit" v-model="form.id" placeholder="请选择">
          <el-option v-for="item in gradelist" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="name" label="等级名称"><el-input style="width:300px" v-model="form.name" placeholder="请输入等级名称"></el-input></el-form-item>
      <el-form-item prop="l1" label="一级佣金比例" v-if="agent_rank>0">
        <el-input @change="changenum($event, 1)" style="width:300px" v-model="form.l1" placeholder="请输入一级佣金比例"><el-button slot="append">%</el-button></el-input>
      </el-form-item>
      <el-form-item prop="l2" label="二级佣金比例" v-if="agent_rank>1">
        <el-input @change="changenum($event, 2)" style="width:300px" v-model="form.l2" placeholder="请输入二级佣金比例"><el-button slot="append">%</el-button></el-input>
      </el-form-item>
      <el-form-item prop="l3" label="三级佣金比例" v-if="agent_rank>2">
        <el-input @change="changenum($event, 3)" style="width:300px" v-model="form.l3" placeholder="请输入三级佣金比例"><el-button slot="append">%</el-button></el-input>
      </el-form-item>
      <el-form-item label="选择升级条件">
        <el-checkbox-group v-model="conditions" size="medium">
          <el-checkbox v-for="(item, i) in conditionslist" :label="item.id" :key="item.id" border>{{ item.name }}</el-checkbox>
        </el-checkbox-group>
        <div>
          <el-form label-width="140px">
            <template v-for="(item, i) in minlist">
              <el-form-item :label="item.name">
                <el-input style="width:300px" v-model="form[item.key]">
                  <el-button slot="append">{{ item.unit }}</el-button>
                </el-input>
              </el-form-item>
            </template>
          </el-form>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确定</el-button>
    </div>
  </div>
</template>

<script>
import {save_agent_grade, get_agentgrade_detail} from '@/api/mall/agent';
import {objextend} from '@/utils/index';
import {mapGetters} from 'vuex';

export default {
  props: {
    ids: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      conditions: [],
      isedit: false,
      conditionslist: [
        {
          id: 1,
          name: '下级用户人数',
          key: 'users',
          unit: '人'
        },
        {
          id: 2,
          name: '佣金总额',
          key: 'commission',
          unit: '元'
        },
        {
          id: 3,
          name: '已提现佣金总额',
          key: 'draw',
          unit: '元'
        },
        {
          id: 4,
          name: '下级用户消费金额',
          key: 'payment',
          unit: '元'
        },
        {
          id: 5,
          name: '下级分销商人数',
          key: 'agents',
          unit: '人'
        }
      ],
      gradetext: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
      form: {
        id: '',
        name: '',
        l1: '',
        l2: '',
        l3: '',
        users: 0, //	int	下级用户人数
        commission: 0, //	float	佣金总额
        draw: 0, //	float	已提现佣金总额
        payment: 0, //	float	下级用户消费金额
        agents: 0, //
        status: 1
      },
      userRules: {
        id: [
          {
            required: true,
            trigger: 'change',
            message: '请选择等级'
          }
        ],
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入等级名称'
          }
        ],
        l1: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入佣金比例'
          }
        ],
        l2: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入佣金比例'
          }
        ],
        l3: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入佣金比例'
          }
        ]
      }
    };
  },
  computed: {
    minlist() {
      let list = this.conditionslist.filter(a => {
        return this.conditions.indexOf(a.id) > -1;
      });

      return list;
    },
    gradelist() {
      let list = [];
      for (var i = 1; i < 11; i++) {
        if (this.ids.indexOf(i) > -1) {
          list.push({
            value: i,
            label: this.gradetext[i] + '级',
            disabled: true
          });
        } else {
          list.push({
            value: i,
            label: this.gradetext[i] + '级',
            disabled: false
          });
        }
      }
      return list;
    },
     ...mapGetters(["agent_rank"])
  },

  watch: {
    conditions() {
      let nlist = this.conditionslist.filter(a => {
        return this.conditions.indexOf(a.id) == -1;
      });
      nlist.forEach(c => {
        this.form[c.key] = 0;
      });
    }
  },
  created() {},
  methods: {
    changenum(data, i) {
      if (Number(data) - 0.01 < 0) {
        if (i == 1) {
          this.form.l1 = 0.01;
        } else if (i == 2) {
          this.form.l2 = 0.01;
        } else if (i == 3) {
          this.form.l3 = 0.01;
        }
      }
    },
    getinit(id) {
      let data = {
        id: id
      };
      get_agentgrade_detail(data).then(res => {
        this.form = objextend(this.form, res.msg);
        this.conditionslist.forEach(a => {
          if (Number(this.form[a.key]) > 0) {
            this.conditions.push(a.id);
          }
        });
        this.isedit = true;
      });
    },
    save() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          if (_this.conditions.length == 0) {
            _this.$message.error('至少选择一项升级条件');
            return false;
          }
          save_agent_grade(this.form).then(res => {
            _this.close();
          });
        }
      });
    },
    close() {
      this.$emit('on-close');
    }
  }
};
</script>

<style></style>
